<template>
	<view class="content">
		<image class="logo" src="/static/logo.jpg"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="margin-top: 20px;">
			<text class="desc">openid：{{openId}}</text>
		</view>
		
		<view>测试支付</view>
		<view style="margin-top: 20px;">
			<button @click="open">微信支付</button>
			<uni-pay ref="payRef" :callOpenId="openId"></uni-pay>
		</view>
		
		<view style="margin-top: 50px">
			<button type="primary" @click="onJumpHome">回到首页</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	
	const title = getApp().globalData.appName;

	let openId = ref();
	
	let info = ref({
		provider: "wxpay", // 指定微信支付
		total_fee: 1, // 支付金额，单位分
		order_no: "", // 业务系统订单号
		out_trade_no: "", // 插件支付单号
		description: "测试订单sxf", // 支付描述
		type: "goods", // 支付回调类型，如：recharge-余额充值，goods-商品订单
		custom: {
			remark: "sxf"
		}
	});
	
	let payRef = ref(null);
	
	onLoad(async(option) => {
		console.log("option", option);
		openId.value = option.openId;
		console.log("openid：", openId.value);
	});
	
	const open = () => {
		info.value.order_no = "Test" + Date.now(); // 模拟生成订单号
		info.value.out_trade_no = `${info.value.order_no}-1`
		// 打开支付收银台
		payRef.value.open(info.value);
	};
	
	const onJumpHome = () => {
		// 进入首页
		uni.redirectTo({
			url: "/pages/ticker/list"
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.desc {
		font-size: 26rpx;
		color: #8f8f94;
	}
</style>
